<template>
  <view class="tool-wrap">
    <view class="dice-3d">
      <!-- 显示骰子结果 -->
      <view class="result" v-if="face && !isRolling">
        <view class="result-value">{{ face }}</view>
        <view class="result-label">点数</view>
      </view>
      
      <view class="cube" :class="{ rolling: isRolling }" :style="{ transform: cubeTransform, transition: cubeTransition }">
        <view class="face f1">
          <view class="pip c" />
        </view>
        <view class="face f2">
          <view class="pip tl" />
          <view class="pip br" />
        </view>
        <view class="face f3">
          <view class="pip tl" />
          <view class="pip c" />
          <view class="pip br" />
        </view>
        <view class="face f4">
          <view class="pip tl" />
          <view class="pip tr" />
          <view class="pip bl" />
          <view class="pip br" />
        </view>
        <view class="face f5">
          <view class="pip tl" />
          <view class="pip tr" />
          <view class="pip c" />
          <view class="pip bl" />
          <view class="pip br" />
        </view>
        <view class="face f6">
          <view class="pip tl" />
          <view class="pip ml" />
          <view class="pip bl" />
          <view class="pip tr" />
          <view class="pip mr" />
          <view class="pip br" />
        </view>
      </view>
    </view>
    <view class="row">
      <button class="btn primary" @tap="roll">摇一摇</button>
      <button class="btn" @tap="reset">重置</button>
    </view>
    <text class="hint">点击“摇一摇”随机 1-6 点，小动画提醒。</text>
  </view>
</template>

<script>
export default {
  name: 'DiceRoller',
  props: {
    autoRollKey: { type: Number, default: 0 },
  },
  data() {
    return {
      face: 1,
      isRolling: false,
      cubeTransform: 'rotateX(0deg) rotateY(0deg) rotateZ(0deg)',
      cubeTransition: 'transform .0s linear',
    }
  },
  methods: {
    roll() {
      if (this.isRolling) return
      this.isRolling = true
      uni.vibrateShort && uni.vibrateShort()
      const duration = 1300
      const finalFace = 1 + Math.floor(Math.random() * 6)
      this.face = finalFace
      // 在滚动期间随机改变姿态（线性、短周期）
      this.cubeTransition = 'transform .16s linear'
      const randomRotation = () => {
        const rx = (Math.random() * 360) - 180
        const ry = (Math.random() * 360) - 180
        const rz = (Math.random() * 60) - 30
        this.cubeTransform = `rotateX(${rx}deg) rotateY(${ry}deg) rotateZ(${rz}deg)`
      }
      randomRotation()
      if (this._rand) clearInterval(this._rand)
      this._rand = setInterval(randomRotation, 120)

      // 结束阶段：清除随机，ease-out 旋到目标
      if (this._raf) clearTimeout(this._raf)
      this._raf = setTimeout(() => {
        if (this._rand) { clearInterval(this._rand); this._rand = null }
        this.cubeTransition = 'transform .7s cubic-bezier(.1,.9,.1,1)'
        this.cubeTransform = this.getRotationForFace(finalFace)
        setTimeout(() => { this.isRolling = false }, 720)
      }, duration)
    },
    reset() {
      if (this._raf) clearTimeout(this._raf)
      if (this._rand) clearInterval(this._rand)
      this.isRolling = false
      this.face = 1
      this.cubeTransition = 'transform .0s linear'
      this.cubeTransform = 'rotateX(0deg) rotateY(0deg) rotateZ(0deg)'
    },
    getRotationForFace(n) {
      switch (n) {
        case 1: return 'rotateX(0deg) rotateY(0deg) rotateZ(0deg)';
        case 2: return 'rotateX(90deg) rotateY(0deg) rotateZ(0deg)';
        case 3: return 'rotateX(0deg) rotateY(-90deg) rotateZ(0deg)';
        case 4: return 'rotateX(0deg) rotateY(90deg) rotateZ(0deg)';
        case 5: return 'rotateX(-90deg) rotateY(0deg) rotateZ(0deg)';
        case 6: return 'rotateX(0deg) rotateY(180deg) rotateZ(0deg)';
        default: return 'rotateX(0deg) rotateY(0deg) rotateZ(0deg)';
      }
    }
  },
  watch: {
    autoRollKey() {
      // 外部请求触发一次摇动
      this.roll()
    }
  },
  beforeDestroy() { if (this._raf) clearTimeout(this._raf) }
}
</script>

<style>
.tool-wrap { display: grid; gap: 16rpx; justify-items: center; }
.dice-3d { perspective: 800rpx; perspective-origin: 50% 50%; }
.cube { position: relative; width: 160rpx; height: 160rpx; transform-style: preserve-3d; will-change: transform; }
.rolling { animation: dice-tilt-3d .9s linear infinite; }
@keyframes dice-tilt-3d {
  0%   { transform: translate3d(0,0,0) rotateX(0deg)   rotateY(0deg)   rotateZ(0deg); }
  10%  { transform: translate3d(0,0,14rpx) rotateX(24deg)  rotateY(-22deg) rotateZ(6deg); }
  20%  { transform: translate3d(0,0,0) rotateX(-18deg) rotateY(28deg)  rotateZ(-10deg); }
  30%  { transform: translate3d(0,0,18rpx) rotateX(30deg) rotateY(18deg)  rotateZ(8deg); }
  40%  { transform: translate3d(0,0,0) rotateX(-26deg) rotateY(-24deg) rotateZ(-6deg); }
  50%  { transform: translate3d(0,0,20rpx) rotateX(32deg) rotateY(-14deg) rotateZ(10deg); }
  60%  { transform: translate3d(0,0,0) rotateX(-20deg) rotateY(26deg)  rotateZ(-8deg); }
  70%  { transform: translate3d(0,0,12rpx) rotateX(26deg) rotateY(18deg)  rotateZ(6deg); }
  80%  { transform: translate3d(0,0,0) rotateX(-22deg) rotateY(-26deg) rotateZ(-6deg); }
  90%  { transform: translate3d(0,0,10rpx) rotateX(18deg) rotateY(-16deg) rotateZ(4deg); }
  100% { transform: translate3d(0,0,0) rotateX(0deg)   rotateY(0deg)   rotateZ(0deg); }
}
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12rpx; width: 100%; }
.btn { height: 60rpx; border-radius: 20rpx; border: 2rpx solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: #e9ecff; font-size: 24rpx; }
.btn.primary { background: linear-gradient(135deg, #6c8cff, #5a6dff); border-color: rgba(0,0,0,.2); }
.hint { color: #a7b0d9; font-size: 22rpx; }
.face { position: absolute; left: 0; top: 0; right: 0; bottom: 0;
  width: 160rpx; height: 160rpx; border-radius: 24rpx;
  display: block; background: linear-gradient(160deg, #ffffff, #eef2ff);
  border: 2rpx solid rgba(0,0,0,.08);
  box-shadow: 0 14rpx 26rpx rgba(0,0,0,.10), inset 0 10rpx 16rpx rgba(0,0,0,.08);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.face::after { content: ''; position: absolute; left: 12rpx; top: 12rpx; right: 12rpx; height: 18rpx; background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0)); border-radius: 12rpx; }
.pip { position: absolute; width: 22rpx; height: 22rpx; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fffb, #d33 60%, #a10 100%); box-shadow: 0 2rpx 4rpx rgba(0,0,0,.3); }
.tl { left: 24rpx; top: 24rpx; }
.tr { right: 24rpx; top: 24rpx; }
.bl { left: 24rpx; bottom: 24rpx; }
.br { right: 24rpx; bottom: 24rpx; }
.ml { left: 24rpx; top: 50%; transform: translateY(-50%); }
.mr { right: 24rpx; top: 50%; transform: translateY(-50%); }
.c { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.f1 { transform: translateZ(80rpx); }
.f6 { transform: rotateY(180deg) translateZ(80rpx); }
.f3 { transform: rotateY(90deg) translateZ(80rpx); }
.f4 { transform: rotateY(-90deg) translateZ(80rpx); }
.f5 { transform: rotateX(90deg) translateZ(80rpx); }
.f2 { transform: rotateX(-90deg) translateZ(80rpx); }

/* 骰子结果显示样式 - 优化微信小程序显示 */
.result {
  position: absolute;
  top: -40rpx;
  right: -40rpx;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 30rpx;
  padding: 10rpx 20rpx;
  box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 2rpx solid rgba(0, 0, 0, 0.12);
  z-index: 100; /* 确保在最上层显示 */
  transform: translateZ(0); /* 启用硬件加速 */
}

.result-value {
  font-size: 40rpx;
  font-weight: bold;
  color: #ff6b35;
  line-height: 1;
}

.result-label {
  font-size: 20rpx;
  color: #666;
  margin-top: 2rpx;
}
</style>


